// 选择用户
<template>
  <div>
    <el-input v-model="EMPLOYEE_NAME" readonly placeholder="员工姓名">
      <i slot="suffix" class="el-input__icon el-icon-circle-plus" @click="openDia"/>
      <i slot="suffix" class="el-input__icon el-icon-error" @click="changeDE"/>
    </el-input>
    <!-- 弹框 -->
    <el-dialog :visible.sync="dialogVisible" :append-to-body="true" :close-on-click-modal="false" title="员工选择" width="50%">
      <!-- 查询条件 -->
      <div class="searchform">
        <el-form ref="searchForm" :inline="true" :model="search" size="mini">
          <el-form-item prop="employeeNo" label="员工编号">
            <el-input
              v-model="search.employeeNo"
              placeholder="员工编号"
              class="search-input"
              clearable
            />
          </el-form-item>
          <el-form-item prop="employeeName" label="员工姓名">
            <el-input
              v-model="search.employeeName"
              placeholder="员工姓名"
              class="search-input"
              clearable
            />
          </el-form-item>
          <br>
          <div style="text-align:center">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchRole">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="table">
        <!-- 用户列表 @current-change="select"-->
        <el-table
          v-loading="load"
          ref="roleTable"
          :data="list"
          tooltip-effect="dark"
          style="width: 100%"
          highlight-current-row
          border
          @row-dblclick="doubleClick"
        >
          <el-table-column label="序号" type="index" min-width="50"/>
          <el-table-column prop="EMPLOYEE_NO" label="员工编号" min-width="100"/>
          <el-table-column prop="USER_CODE" label="用户代码" min-width="100"/>
          <el-table-column prop="EMPLOYEE_NAME" label="员工姓名" min-width="100"/>
        </el-table>
      </div>
      <!-- 分页 -->
      <div style="text-align:right">
        <Pagination
          :data="page"
          @change-size="handleSizeChange"
          @change-page="handleCurrentChange"
        />
      </div>
      <div style="text-align:center">
        <span slot="footer" class="dialog-footer">
          <!--<el-button type="primary" @click="req">确 定</el-button>-->
          <el-button @click="clear">取 消</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUsersList } from '@/api/admin/org/employeeInfo'
import Pagination from '@/components/Pagination'
import formMixins from '@/mixins/formMixins'

export default {
  name: 'UserProfitSelect',
  components: {
    Pagination
  },
  mixins: [formMixins],
  props: {
    EMPLOYEE_NAME: String,
    EMPLOYEE_NO: String
  },
  data() {
    return {
      list: [],
      load: false,
      page: {},
      multipleSelection: [],
      search: {
        limit: 10,
        pageNum: 1,
        employeeNo: '',
        employeeName: ''
      },
      dialogVisible: false
    }
  },
  mounted() {},
  methods: {
    // 打开选择框
    openDia() {
      this.dialogVisible = true
      this.searchRole()
    },
    // 删除代理商
    changeDE() {
      this.EMPLOYEE_NAME = ''
      // this.fromtype = '';
    },
    // 查询界面
    searchRole() {
      this.load = true
      this.search.typeUser = 'claim'
      getUsersList(this.search)
        .then(res => {
          this.list = res.rows
          this.page = res
          this.load = false
        })
        .catch(err => {
          this.load = false
        })
    },
    // 代理商列表选择
    select(val) {
      debugger
      if (val == null) {
        this.multipleSelection = []
      } else {
        this.multipleSelection = val
      }
    },
    // 代理商选择分页
    handleSizeChange(size) {
      this.search.limit = size
      this.searchRole()
    },
    handleCurrentChange(page) {
      this.search.pageNum = page
      this.searchRole()
    },
    // 确定
    req() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'info',
          message: '请选择数据!'
        })
      } else {
        this.$emit('getDealerInfo', this.multipleSelection)
        this.dialogVisible = false
      }
    },
    doubleClick(row) {
      this.$emit('getDealerInfo', row)
      this.dialogVisible = false
    },
    clear() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
</style>
